<div class="underlying" style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;">
  <div class="table">
    <!-- 头部Table -->
    <nz-table #nestedTable style="border-collapse:collapse;border-radius:4px 4px 0px 0px; height:100%"
      [nzData]="tempData" class="designTable" [nzShowPagination]='false' [nzScroll]="{x:'1950px',y:'750px'}">
      <thead class="tableHeard" style="text-align: center !important;">
        <tr style="text-align: center !important;">
          <th nzWidth="60px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="250px">工聯單號</th>
          <th nzWidth="230px">治具名稱</th>
          <th nzWidth="80px" nzCustomFilter>箱號
            <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
              [nzDropdownMenu]="menu" nzPlacement="bottom" nzTrigger="click" [nzClickHide]="false" nzTableFilter></i>
          </th>
          <th nzWidth="150px">品檢狀態</th>
          <th nzWidth="150px">品檢提醒</th>
          <th nzWidth="200px">送檢時間</th>
          <th nzWidth="220px">工作時間統計</th>
          <th nzWidth="200px">品檢備註</th>
          <th nzWidth="200px">退單備註</th>
          <th nzWidth="150px">治具交期</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <ng-container *ngFor="let item of tempData let bigkey = index">
          <tr id="first">
            <td style="width:60px;"> <a *ngIf="item.tip == 1" class="new"></a>
              <a *ngIf="item.tip == 2" class="warning"></a>
            </td>
            <td nzShowExpand [(nzExpand)]="item.expand" style="color: rgba(48,73,77,1);width:50px"
              (nzExpandChange)="QueryWorkOrder(bigkey)"></td>
            <!-- 工聯單號 -->
            <td style="width:250px;text-align: left; cursor: pointer;" title="{{item.union_order}}">
              {{item.union_order}}</td>
            <!-- 治具名稱 -->
            <td style="width:230px;text-align: left;" title={{item.name}}>
              <span
                style=" text-overflow: -o-ellipsis-lastline;
                                  overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left;width: 225px;">
                {{item.name}}
              </span>
            </td>
            <!-- 箱號 -->
            <td style="width:80px;"></td>
            <!-- 品檢狀態 -->
            <td style="width:150px;"></td>
            <!-- 品檢提醒 -->
            <td style="width:150px;"></td>
            <!-- 送檢時間 -->
            <td style="width:200px;"></td>
            <!-- 工單時間統計 -->
            <!-- {{item.total_time  === '' ? '' : item.total_time +'秒'}} -->
            <td style="width:220px;"></td>
            <!-- 品檢備註 -->
            <td style="width:200px;">
            </td>
            <!--退單備註  -->
            <td style="width:200px;"></td>
            <!-- 開始時間 -->
            <!-- 治具交期 -->
            <td style="width:150px;">{{item.delivery_date}}</td>

          </tr>
          <tr [(nzExpand)]="item.expand">
            <td colspan="12" style="padding-left:0 !important;">
              <!-- 展开治具Table -->
              <nz-table #innerTable [nzData]="workData[bigkey]" nzSize="middle" [nzShowPagination]="false"
                *ngFor="let item of workData[bigkey] let key = index">
                <tbody class="downData" style="width: 100%;text-align: center !important;">
                  <tr id="second" style="text-align: center !important;">
                    <td style="min-width:60px;" *ngIf="item.check_date == ''">
                      <a class="new"></a>
                    </td>
                    <td style="min-width:60px;" *ngIf="item.check_date != ''">
                      <a *ngIf="item.remark != ''" class="warning"></a>
                    </td>
                    <td *ngIf="item.chaidan == 1 " nzShowExpand [(nzExpand)]="item.expand2"
                      style="color: rgba(48,73,77,1);min-width:50px;" (nzExpandChange)="QueryWorkOrder2(item,bigkey,key)"></td>
                    <td *ngIf="item.chaidan != 1 " style="color: rgba(48,73,77,1) ; min-width:50px;"></td>
                    <!-- 工聯單號 -->
                    <td style="min-width:250px;text-align: left" title="{{item.sheet_order}}">
                      <span
                        style="text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;
                                                     -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left; cursor: pointer;width: 245px;">
                        {{item.sheet_order}}</span>
                    </td>
                    <!-- 治具名稱 -->
                    <td style="min-width:230px;text-align: center"></td>
                    <!--箱號 -->
                    <td *ngIf="item.chaidan != 1 " (click)="showBox(item)" class="fontColor"
                      style="min-width:80px;text-align: center;cursor:pointer;text-decoration:underline;">
                      {{ item.box ==='' ? '' : item.box +'號' }}
                    </td>
                    <td *ngIf="item.chaidan == 1 " class="fontColor"
                      style="min-width:80px;text-align: center;cursor:pointer;text-decoration:underline;"></td>
                    <!-- 品檢狀態 -->
                    <td *ngIf="item.chaidan != 1 " style="min-width:150px;text-align: center">
                      <span style="color:#FACA00" *ngIf="item.check_status === '' && item.check_date === ''">待品檢</span>
                      <span style="color:#ffffff" *ngIf="item.check_status === '0' ">品檢中</span>
                      <span style="color:#21CC97" *ngIf="item.check_status === '1' ">已品檢</span>
                      <span style="color:#21CC97" *ngIf="item.check_status === '2' ">已品檢/NG</span>
                    </td>
                    <!-- 品檢狀態 -->
                    <td *ngIf="item.chaidan == 1 " style="min-width:150px;text-align: center">
                    </td>
                    <!-- 品檢提醒 -->
                    <td style="min-width:150px;text-align: center">
                      <span style="color:#FF4848" *ngIf="isShow[bigkey][key]">
                        <!-- *ngIf="item.check_status === '0' &&  item.check_date !== '' && timeNow > timeDelay" -->
                        Delay
                      </span>
                    </td>
                    <!-- 送檢時間 -->
                    <td *ngIf="item.chaidan != 1 " style="min-width:200px;text-align: center">
                      <a class="addDate" (click)="addDate(item,bigkey,key)"
                        *ngIf=" !item.check_date || item.check_date === ''"></a>
                      {{item.check_date}}
                    </td>
                    <td *ngIf="item.chaidan == 1 " style="min-width:200px;text-align: center">
                    </td>
                    <!-- 工單時間統計 -->
                    <td style="min-width:220px;align-items: center;" (click)="clickLine(bigkey,key,item.timestamp)">
                      <div *ngIf="sfmtime[bigkey][key].zs">
                        <span class="start" (click)="start(bigkey,key,item)"></span>
                        <i>{{sfmtime[bigkey][key].sj}}</i>
                        <span class="end" (click)="end(item,bigkey,key)"></span>
                      </div>
                    </td>
                    <!-- 品檢備註 -->
                    <td style="min-width:200px;text-align: left;" title={{item.check_remark}}>
                      <span
                        style="text-overflow: -o-ellipsis-lastline;
                          overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical; cursor: pointer;width: 195px;">{{item.check_remark}}
                      </span>
                    </td>
                    <!--退單備註  -->
                    <td style="min-width:200px;text-align: left;" title={{item.remark}}>
                      <span
                        style=" text-overflow: -o-ellipsis-lastline;
                      overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical; cursor: pointer;width: 195px;">{{item.remark}}
                      </span>
                    </td>
                    <!-- 開始時間 -->
                    <!-- 治具交期 -->
                    <td style="min-width:150px;text-align: center"></td>
                  </tr>
                  <tr [(nzExpand)]="item.expand2" *ngFor="let item3 of listfd[bigkey][key]">
                    <td style="min-width:60px;background: #000;"></td>
                    <td style="background: #000;color: rgba(48,73,77,1) ; min-width:50px;"></td>
                    <td style="background: #000;min-width:250px;text-align: left" title="{{item3.workorder}}">
                      <span
                        style="text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;
                                                     -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left; cursor: pointer;width: 245px;">
                        {{item3.workorder}}</span>
                    </td>
                    <td style="background: #000;min-width:230px;text-align: center"></td>
                    <td class="fontColor" (click)="showBox(item3)"
                      style="min-width:80px;text-align: center;cursor:pointer;text-decoration:underline;background: #000;">
                      {{ item3.box ==='' ? '' : item3.box +'號' }}
                    </td>
                    <td style="background: #000;min-width:150px;text-align: center">
                      <span style="color:#FACA00" *ngIf="item3.check_status === '' && item3.check_date === ''">待品檢</span>
                      <span style="color:#ffffff" *ngIf="item3.check_status === '0' ">品檢中</span>
                      <span style="color:#21CC97" *ngIf="item3.check_status === '1' ">已品檢</span>
                      <span style="color:#21CC97" *ngIf="item3.check_status === '2' ">已品檢/NG</span>
                    </td>
                    <td style="background: #000;min-width:150px;text-align: center">
                      <!-- <span style="color:#FF4848" *ngIf="isShow[bigkey][key]">
                                  Delay
                                </span> -->
                    </td>
                    <td style="background: #000;min-width:200px;text-align: center">
                      <a class="addDate" (click)="addDate(item3,bigkey,key)"
                        *ngIf=" !item3.check_date || item3.check_date === ''"></a>
                      {{item3.check_date}}
                    </td>
                    <td style="background: #000;min-width:220px;align-items: center;"></td>
                    <td style="background: #000;min-width:200px;text-align: left;"></td>
                    <td style="background: #000;min-width:200px;text-align: left;"></td>
                    <td style="background: #000;min-width:150px;text-align: center"></td>
                  </tr>
                </tbody>
              </nz-table>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </nz-table>

    <!-- 箱号搜索 -->
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <div class="search-box" style="background:#487377; margin-top: -18px;">
        <input type="text" nz-input placeholder="come on 箱号" [(ngModel)]="searchValue" />
        <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
          Search
        </button>
        <button nz-button nzSize="small" (click)="reset()" class="search-button">Reset</button>
      </div>
    </nz-dropdown-menu>
    <!-- 添加送檢時間 -->
    <nz-modal class="addTime" [(nzVisible)]="addTime" nzTitle="送檢時間" (nzOnCancel)="CancelAddTime()"
      (nzOnOk)="addTimeOk()" [nzOkLoading]="isOkLoadingTime" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div>
        <textarea nz-input [(ngModel)]="time" [nzAutosize]="{ minRows: 2, maxRows: 6 }" class="deRemark"></textarea>
        <div style="margin:24px 0;"></div>
      </div>
    </nz-modal>
    <!-- 添加编程备注 -->
    <nz-modal class="designRemark" [(nzVisible)]="addRemark1" nzTitle="總檢備註" (nzOnCancel)="CancelAddRemark()"
      (nzOnOk)="addRemarkOk()" [nzOkLoading]="isOkLoadingRemark" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div>
        <textarea nz-input [(ngModel)]="designRemark" [nzAutosize]="{ minRows: 2, maxRows: 6 }"
          class="deRemark"></textarea>
        <div style="margin:24px 0;"></div>
      </div>
      <!-- <input type="textarea" [(ngModel)]="designRemark" name="value1"  class="deRemark"> -->
    </nz-modal>
  </div>
</div>